<template>
  <div class="classify-page">
    <HeaderBar />
    <div class="classify-content">
      <div class="left-menu">
        <md-tab-bar class="tab" :menu="leftMenu" textKey="title" @change="leftMenuChange" />
      </div>
      <div class="right-content" v-if="leftMenu[leftActiveIndex]">
        <div class="right-header">
          <md-tab-bar class="right-menu" :menu="rightMenu" textKey="title" @change="rightMenuChange"/>
        </div>
        <md-dropdown @change="filterChange(index)">
          <a href="javascript:;" class="filter">筛选</a>
          <md-dropdown-menu slot="dropdown">
              <md-dropdown-item>黄金糕</md-dropdown-item>
              <md-dropdown-item>狮子头</md-dropdown-item>
              <md-dropdown-item>螺狮粉</md-dropdown-item>
              <md-dropdown-item>双皮奶</md-dropdown-item>
              <md-dropdown-item>蚵仔煎</md-dropdown-item>
          </md-dropdown-menu>
        </md-dropdown>
        <md-scroll-view ref="scrollView" class="prodcut-wrap" @scrollBottom="scrollBottom">
          <md-product-list :products="products"/>
        </md-scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBar from './components/headerBar'

export default {
  name: 'Classify',
  data () {
    return {
      leftMenu: [],
      leftActiveIndex: 0,
      products: [],
      fetchParams: {
        page: 1,
        pageSize: 5
      }
    }
  },
  components: {
    HeaderBar
  },
  created () {
    this.initData()
    this.fetchProducts()
  },
  computed: {
    rightMenu () {
      return [
        {
          id: this.leftMenu[this.leftActiveIndex].id,
          title: '全部'
        }
      ].concat(this.leftMenu[this.leftActiveIndex].children)
    }
  },
  methods: {
    async initData () {
      const classifyData = await this.$api.product.classify()
      this.leftMenu = classifyData.data
    },
    async fetchProducts () {
      const data = await this.$api.product.list(this.fetchParams)
      if (this.fetchParams.page === 1) {
        this.products = data.data
      } else {
        this.products = this.products.concat(data.data)
      }
    },
    leftMenuChange (index, row) {
      this.leftActiveIndex = index
      this.fetchParams.page = 1
      this.fetchParams.classify_id = row.id
      this.$refs.scrollView.$el.scrollTo(0, 0)
      this.fetchProducts()
    },
    rightMenuChange (index, row) {
      this.fetchParams.page = 1
      this.fetchParams.classify_id = row.id
      this.$refs.scrollView.$el.scrollTo(0, 0)
      this.fetchProducts()
    },
    scrollBottom () {
      this.fetchParams.page += 1
      this.fetchProducts()
    },
    filterChange(index){
      console.log(index)
    }
  }
  
}
</script>

<style lang="scss" scoped>
.classify-page {
  @include wh(100vw, calc(100vh - 98px));
  @include flex(column);
  .header-bar {
    flex-shrink: 0;
  }
  .classify-content {
    @include wh(100%, 100%);
    @include flex();
    overflow: hidden;
    flex: 1;
    .left-menu {
      @include wh(172px, 100%);
      @include border1px(right);
      overflow: auto;
      flex-shrink: 0;
      .tab-bar {
        height: auto;
        background: #FAFAFA;
        /deep/ nav {
          height: auto;
          @include flex(column);
          a {
            height: 100px;
            &.active {
              font-size: $font-size-m;
            }
          }
        }
      }
    }
    .right-content {
      width: 0;
      flex: 1;
      height: 100%;
      @include flex(column, flex-start, center);
      .tab-bar {
        width: auto;
        flex: 1;
        overflow-x: auto;
        /deep/ nav {
          width: auto;
          @include flex(row, flex-start, center);
          a {
            flex-shrink: 0;
            &.active {
              font-size: $font-size-m;
            }
          }
        }
      }
    }
    .right-header {
      @include flex(row, center, center);
      width: 100%;
      .icon {
        font-size: $font-size-m;
        flex-shrink: 0;
      }
    }
    .filter{
       font-size: $font-size-m;
       display: flex;
       position: relative;
       right: 0;
       top:0;
       flex-shrink: 0;
    }
    .prodcut-wrap {
      width: 100%;
      overflow-y: auto;
      flex: 1;
    }
  }
}
</style>
